<template>
  <tm-sheet
    v-if="tabsSwiper || (!tabsSwiper && isShowRender)"
    :transprent="props.transprent"
    :color="props.color"
    :followTheme="props.followTheme"
    :followDark="props.followDark"
    :dark="props.dark"
    :round="props.round"
    :shadow="props.shadow"
    :outlined="props.outlined"
    :border="props.border"
    :borderStyle="props.borderStyle"
    :borderDirection="props.borderDirection"
    :text="props.text"
    :linear="props.linear"
    :linearDeep="props.linearDeep"
    :_style="props._style"
    :_class="props._class"
    :eventPenetrationEnabled="true"
    :margin="[0, 0]"
    :padding="[0, 0]"
    :width="_width"
    :height="_height"
  >
    <view
      v-if="sc_top < -30 && reFresh != 0 && !tabsSwiperDisAbledPull"
      :style="{
        top: (reFresh == 2 ? -refreshJuli / 2 : -sc_top - 30) + 'px',
        width: _width + 'rpx'
      }"
      class="zIndex-17 absolute l-0 flex flex-row flex-row-center-center"
    >
      <view class="pr-32">
        <tm-icon
          v-if="sc_top > refreshJuli && reFresh != 2"
          name="tmicon-long-arrow-down"
        ></tm-icon>
        <tm-icon
          v-if="sc_top <= refreshJuli && reFresh != 2"
          name="tmicon-long-arrow-up"
        ></tm-icon>
        <tm-icon v-if="reFresh == 2" spin name="tmicon-shuaxin"></tm-icon>
      </view>
      <view>
        <tm-text
          v-if="sc_top > refreshJuli"
          _class="text-align-center"
          label="下拉刷新"
        ></tm-text>
        <tm-text
          v-if="sc_top <= refreshJuli"
          _class="text-align-center"
          label="松开立即刷新"
        ></tm-text>
        <tm-text _class="text-align-center" label="更新于今日8:30"></tm-text>
      </view>
    </view>
    <scroll-view
      @scrolltolower="onScrollBootom"
      @scroll="onScroll"
      :scroll-y="_height ? true : false"
      enable-flex
      class="flex-col"
      :style="[
        { width: _width + 'rpx' },
        _height ? { height: _height + 'rpx' } : ''
      ]"
    >
      <view
        @touchStart="onScrollStart"
        @touchend="onScrollEnd"
        v-if="isShowRender"
        :style="{
          transform: `translateY(${reFresh == 2 ? -refreshJuli : 0}px)`
        }"
        class="flex contentx"
      >
        <slot></slot>
      </view>
    </scroll-view>
  </tm-sheet>
</template>

<script lang="ts" setup>
/**
 * 选项卡面板
 * @description 不可以单独使用，必须放置在tm-tabs组件中使用。
 */
import tmSheet from '../tm-sheet/tm-sheet.vue';
import tmTabs from '../tm-tabs/tm-tabs.vue';
import tmIcon from '../tm-icon/tm-icon.vue';
import tmText from '../tm-text/tm-text.vue';
import { tabsobj } from '../tm-tabs/interface';
import {
  Ref,
  ref,
  computed,
  watch,
  onUnmounted,
  inject,
  ComputedRef,
  getCurrentInstance,
  ComponentInternalInstance,
  PropType,
  onMounted
} from 'vue';
import { custom_props } from '../../tool/lib/minxs';
const tabs = ref<InstanceType<typeof tmTabs> | null>(null);
const proxy = getCurrentInstance()?.proxy ?? null;
const props = defineProps({
  ...custom_props,
  transprent: {
    type: [Boolean, String],
    default: false
  },
  color: {
    type: String,
    default: 'white'
  },
  //是否显示红点，与count不能同时出现
  dot: {
    type: Boolean,
    default: false
  },
  count: {
    type: [String, Number],
    default: ''
  },
  //红点颜色
  dotColor: {
    type: String,
    default: 'red'
  },
  name: {
    type: [String, Number],
    default: '',
    required: true
  },
  title: {
    type: String,
    default: ''
  },
  icon: {
    type: String,
    default: ''
  },
  pullFun: {
    type: [Function] as PropType<(type: 'top' | 'bottom') => boolean>,
    default: () => {
      return (type: 'top' | 'bottom') => {
        return true;
      };
    }
  }
});

//---scroll下拉刷新---------
//0未初始化/松手可能未被触发，没有达到刷新的条件（即被中止了），1下拉手势中还未放开手。2松开手触发下拉刷新，3复位刷新完成
type reFreshType = 0 | 1 | 2 | 3;
const sc_top = ref(0);
const refreshJuli = -100; //达到120才能被刷新
const reFresh: Ref<reFreshType> = ref(0);
const isyesResh = ref(false); //是否达到了规定刷新条件。
const isUpToogle = ref(true); //手指是否放开。

//---------------

const _pname = computed(() => String(props.name));
//父级方法。
let parent: any = proxy?.$parent;
while (parent) {
  if (parent?.tmTabsId == 'tmTabsId' || !parent) {
    break;
  } else {
    parent = parent?.$parent ?? null;
  }
}

if (typeof _pname.value != 'undefined' && _pname.value != '') {
  parent?.pushKey({
    key: _pname.value,
    title: props.title,
    icon: props.icon,
    dot: props.dot,
    count: props.count,
    dotColor: props.dotColor
  });
}

const _width = inject(
  'tabsWidth',
  computed(() => 0)
);
const _height = inject(
  'tabsheight',
  computed(() => 0)
);
const tabsActiveName: ComputedRef<string | number | undefined> = inject(
  'tabsActiveName',
  computed(() => undefined)
);
const tabsActiveCacheTabse = inject(
  'tabsActiveCacheTabse',
  computed<Array<tabsobj>>(() => {
    return [];
  })
);
const tabsSwiper = inject(
  'tabsSwiper',
  computed(() => false)
);
const tabsSwiperIsMoveing = inject(
  'tabsSwiperIsMoveing',
  computed(() => false)
);
const tabsSwiperDisAbledPull = inject(
  'tabsSwiperDisAbledPull',
  computed(() => true)
);

const activeIndex = inject(
  'tabsActiveactiveIndex',
  computed(() => 0)
);
// const selfIndex = computed(()=>tabsActiveCacheTabse.value.findIndex(el=>el.key==tabsActiveName.value))
const selfIndex = computed(() =>
  tabsActiveCacheTabse.value.findIndex((el) => el.key == _pname.value)
);

const isShowRender = computed(() => {
  if (tabsSwiper.value == false) {
    return selfIndex.value == activeIndex.value;
  }
  return (
    selfIndex.value >= activeIndex.value - 1 &&
    selfIndex.value <= activeIndex.value + 1
  );
});

watch(
  [
    () => props.title,
    () => props.icon,
    () => props.dot,
    () => props.dotColor,
    () => props.count
  ],
  () => {
    parent?.setTitle({
      key: _pname.value,
      title: props.title,
      icon: props.icon,
      dot: props.dot,
      count: props.count,
      dotColor: props.dotColor
    });
  }
);
onUnmounted(() => {
  parent?.unbindKey(_pname.value);
});

//=====
function onScroll(e: any) {
  // 切换页面中不允许下拉。
  if (tabsSwiperIsMoveing.value) return;
  if (reFresh.value == 2 && isUpToogle.value) return;
  if (sc_top.value <= refreshJuli) {
    isyesResh.value = true;
  } else {
    isyesResh.value = false;
  }

  sc_top.value = e.detail.scrollTop;
  reFresh.value = 1;
}
function onScrollStart() {
  // 切换页面中不允许下拉。
  if (tabsSwiperIsMoveing.value) return;
  isUpToogle.value = false;
}
async function onScrollEnd() {
  // 切换页面中不允许下拉。
  if (tabsSwiperIsMoveing.value) return;
  isUpToogle.value = true;
  if (reFresh.value == 2) return;
  if (isyesResh.value) {
    let p = await funPull('top');
    if (p) {
      reFresh.value = 0;
    } else {
      isUpToogle.value = false;
    }
  } else {
    reFresh.value = 0;
  }
}
async function onScrollBootom() {
  // 切换页面中不允许下拉。
  if (tabsSwiperIsMoveing.value) return;
  isUpToogle.value = true;
  if (reFresh.value == 2) return;
  if (isyesResh.value) {
    let p = await funPull('bottom');
    if (p) {
      reFresh.value = 0;
    } else {
      isUpToogle.value = false;
    }
  } else {
    reFresh.value = 0;
  }
}
async function funPull(type: 'top' | 'bottom') {
  if (typeof props.pullFun === 'function') {
    uni.showLoading({
      title: '...',
      mask: true
    });
    let p = await props.pullFun(type);
    if (typeof p === 'function') {
      p = await p(type);
    }
    uni.hideLoading();
    return p;
  }
}
</script>

<style scoped>
.contentx {
  transition-duration: 0.5s;
  transition-timing-function: ease;
  transition-delay: 0s;
  transform: translateY(0px);
  transition-property: transform, top;
}
</style>
